<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
         <!-- 面包屑 -->
        <el-breadcrumb v-if="crumbs" separator-class="el-icon-arrow-right">
          <el-breadcrumb-item >学科管理</el-breadcrumb-item>
          <el-breadcrumb-item >{{headline}}</el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>
         <!-- 表单 -->
          <el-form :inline="true"  :model="formInline" class="demo-form-inline">
             <el-form-item  label="目录名称">
               <el-input v-model="formInline.directoryName"></el-input>
             </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="formInline.state" placeholder="请选择">
               <el-option label="已启用" :value=1></el-option>
               <el-option label="已禁用" :value=0></el-option>
              </el-select>
            </el-form-item>
              <el-button @click="clear">清除</el-button>
              <el-button type="primary" @click="serchs">搜索</el-button>
              <el-button style="float: right" type="success" @click="opendialog"><i class="el-icon-edit"></i>新增目录</el-button>    
              <router-link to="/subjects/list" v-if="crumbs"><el-button  style="float: right" type="text"><i class="el-icon-back"></i>返回学科</el-button></router-link>
          </el-form>
          <!-- 提示 -->
          <el-alert :title="'数据一共' + counts+ '条'" type="info" :closable="false" show-icon style="marginBottom: 15px;"></el-alert>
          <!-- 表格 -->
           <el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'#fafafa'}" >
            <el-table-column  prop="id" label="序号" type="index" width="80"></el-table-column>
            <el-table-column  prop="subjectName" label="所属学科" >  </el-table-column>
            <el-table-column prop="directoryName" label="目录名称"></el-table-column>
            <el-table-column prop="username" label="创建者"></el-table-column>
            <el-table-column prop="addDate" label="创建日期" width="180">
              <template #default="{ row }">
              {{tismtransition(row.addDate)}}
            </template>
            </el-table-column>
            <el-table-column prop="totals" label="面试题数量"></el-table-column>
            <el-table-column prop="state"  label="状态"> <template #default="{ row }">{{row.state===1?'已启用':'已禁用'}}</template></el-table-column>
           <el-table-column label="操作" width="180">
            <template #default="{ row }">
              <!-- 根据状态修改样式 -->
              <div v-show="row.state!==1">
                <el-button type="text" @click="statealter(row)">启用</el-button>
                <!-- 传递一个数据区分添加 -->
              <el-button type="text" @click="opendialog(row,'revamp')">修改</el-button>
              <el-button type="text" @click="removedata(row)">删除</el-button>
              </div>
              <div v-show="row.state===1">
              <el-button type="text" @click="statealter(row)">禁用</el-button>
              <el-button type="text" disabled>修改</el-button>
              <el-button type="text" disabled>删除</el-button>
              </div>
                </template>
            </el-table-column>
         </el-table>
         <!-- 分页 -->
        <el-row type="flex" justify="end" style="margin-top:15px">
        <el-pagination background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="prev, pager, next, sizes, jumper" 
            :total="counts"
            :page-sizes="[5, 10, 20,50]"
            :page-size="paging.pagesize"
        ></el-pagination>
    </el-row>
      </el-card>
      <!-- 弹窗 -->
      <el-dialog
  :title="form.id?'修改目录':'新增目录'"
  :visible.sync="popup"
  width="30%"
  :before-close="handleClose"
  class="dialogClass">
  
  <span>
   <el-form ref="formverify" :rules="rulesverify" :model="form" label-width="80px">
    <el-form-item v-if="!crumbs" label="所属学科" prop="subjectID">
    <el-select   v-model="form.subjectID" placeholder="请选择活动区域"  style="width:100%">
      <el-option v-for="item in whatsupjects" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="目录名称" prop="directoryName">
    <el-input v-model="form.directoryName"></el-input>
  </el-form-item>
   </el-form>
  </span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="cataloguecall">取 消</el-button>
    <el-button type="primary" @click="addcatalogue">确定</el-button>
  </span>
</el-dialog>

    </div>
  </div>
</template>
<script>
import { list as getCompanys } from '@/api/hmmm/companys'
import { list as getQuestion } from '@/api/hmmm/questions'
import {list as contentspage ,simple,add,update,remove,changeState} from'@/api/hmmm/directorys'
import dayjs from 'dayjs'
export default {
 

  created () {
    getCompanys()
    getQuestion()
  },
  data() {
      return {
        //学科的具体名称
         headline:'',
         //修改状态的参数
         statedata :{},
         //弹窗的数据
        form: {
         subjectID:'',
         directoryName:'',
       },
       //表单的内容
        formInline: {
          directoryName:'',
          state: '',
        },
        //获取数据的参数
        paging:{
        page:1,
        pagesize:10,
        },
        whatsupjects:[],
        //学科跳转过来携带的id
        subjectsname:'',
        //总页数
        counts:0,
         rulesverify: {
          //新增的表单校验
          directoryName: [
            { required: true, message: '请输入名称', trigger: ['change','blur'] },
            { min: 1, max: 7, message: '长度在 1 到 7 个字符', trigger: ['change','blur']}
          ],
          subjectID: [
            { required: true, message: '学科不能为空', trigger: ['change','blur'] }
          ]},
          //控制隐藏内容
        crumbs:false,
        //拿到的数据
        tableData:[],
        //控制弹窗
        popup:false,
      }

    },
    methods:{
      //分页的方法
      tismtransition(date){
        return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
      },
      //分页的方法
      handleSizeChange(val) {
        this.paging.pagesize = val
         this.gaindata(this.paging)
      },
      //分页的方法
      handleCurrentChange(val) {
        this.paging.page = val
        this.gaindata(this.paging)
      },
      //点击X和蒙版关闭弹窗
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then( _ => {
            done();
                // 清除校验/重置表单
       this.$refs.formverify.resetFields()
      this.form= {
         subjectID:'',
         directoryName:'',
       }
          })
          .catch(_ => {});
      },
      clear(){
        //清除的方法
        this.formInline={
          directoryName:'',
          state: '',
        }
      },
      //点击弹窗中的确认按钮
   async addcatalogue(){
    //判断是否有值
    if(this.$route.query.id){
      this.form.subjectID=this.subjectsname
      this.paging.subjectID=this.subjectsname
      }
     // 兜底校验
      this.$refs.formverify.validate(async(valid) => {
        if (valid) {
          //校验成功
      if(this.form.id){
        //有数据就是修改
           //发起请求
       const res = await update(this.form)
       //提示用户
        this.$message.success('修改成功')
      }else{
        //没有就是添加
        //发起请求
       const res=await add(this.form)
       //提示用户
       this.$message.success('添加成功')
      }
         //重新渲染页面
         this.gaindata(this.paging)
         //关闭弹窗
         this.popup = false
         // 清除校验/重置表单
         this.form= {
          subjectID:'',
          directoryName:'',
         }
        this.$refs.formverify.resetFields()
        }else{
          return
        }
      })
    },
    //点击弹窗中的取消按钮
    cataloguecall(){
        //关闭弹窗
        this.popup = false
        // 清除校验/重置表单
        this.$refs.formverify.resetFields()
         //清空表单
        this.form= {
         subjectID:'',
         directoryName:'',
       }
    },
     //获取数据的前置工作
    async  gaindata(data){
      //如果有数据就是学科跳转过来的
       if(this.$route.query.id){
        //将学科传递过来的参数赋值给数据项
       this.subjectsname=+this.$route.query.id
       //隐藏内容显示
       this.crumbs=true
       //给弹窗表单的隐藏数据项默认为跳转过来的数据
      this.form.subjectID=this.subjectsname
      //请求默认携带跳转过来的数据
      this.paging.subjectID=this.subjectsname
     }
     //发送请求获取数据
      this.twogaindata(this.paging)
     },
     //获取数据的方法
   async twogaindata(data){
       //获取数据
     const res= await contentspage(data)
     //列表数据
     this.tableData=res.data.items
     //总条数
     this.counts=res.data.counts
     ////总页数
     this.pages=res.data.pages
     },

     //打开弹窗的方法
    async opendialog(data,one){
      //如果有参数就是修改
      if(one){
        //打开弹窗
       this.popup=true
       //数据回显
      this.form.id=data.id
      this.form.subjectID=data.subjectID
      this.form.directoryName=data.directoryName
      }else{
        //如果没有参数就是添加
        //打开弹窗
        this.popup=true
      }
      
     },
     //点击删除的方法
      removedata(data){
        //提示
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          //删除的方法
          await remove(data) 
          //重新渲染页面
         this.gaindata(this.paging)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
     },
     //修改状态
     //将要修改的数据的状态和id传入
   async  statealter(data){
    //将需要的id赋值给一个新的数据项一个新的数据项
    this.statedata.id=data.id
    //判断取反
    if(data.state){
 this.statedata.state=0
    }else{
       this.statedata.state=1
    }
    //发送请求修改状态
     await changeState(this.statedata)
     //重新渲染页面
     this.gaindata(this.paging)
     },
     //搜索
     serchs(){
      //判断
      //没有输入内容就搜索
      if(this.formInline.directoryName===''&&this.formInline.state===''){
        //重新渲染页面
       this.gaindata(this.paging)
       //重置渲染页面的参数
       this.paging= {
        page:1,
        pagesize:10,
        }
      }else if(this.formInline.directoryName===''&&this.formInline.state!==''){
       this.paging.state=this.formInline.state
        this.gaindata(this.paging)
        this.paging= {
        page:1,
        pagesize:10,
        }
        }else if(this.formInline.directoryName!==''&&this.formInline.state!==''){
          //将输入的内容赋值给发送请求的数据项里
       this.paging.directoryName=this.formInline.directoryName
       this.paging.state=this.formInline.state
       //重新渲染页面
        this.gaindata(this.paging)
        // 重置渲染页面的参数
        this.paging= {
        page:1,
        pagesize:10,
        }
        }else if(this.formInline.directoryName!==''&&this.formInline.state===''){
       this.paging.directoryName=this.formInline.directoryName
        this.gaindata(this.paging)
        this.paging= {
        page:1,
        pagesize:10,
        }
        }
     },
     //学科目录
    async simplesss(){
      //发送请求拿到所以的学科
      const res=await simple()
      //获取学科
      this.whatsupjects= res.data
      console.log(this.whatsupjects)
     //方便后期接收数据
        const name=this.subjectsname
        //获取与传过来的数据匹配的文字数据
     this.whatsupjects.map(item=>{
          if(item.value == name){
      this.headline=item.label
          }}
        )
     }
    },
    //钩子函数
    created(){
      //渲染页面
       this.gaindata(this.paging)
       //获取学科目录
      this.simplesss()
    }
}

</script>

<style scoped>
.el-breadcrumb{
  /* line-height: 50px;
  height: 50px;
  padding-left: 20px;
  background-color: #fff; */
  border-bottom:1px solid #ebeef5;
  height: 30px;
  margin-bottom: 20px;
  
}
.dialogClass >>> .el-dialog__footer {
   display: flex;
 justify-content: end;
}

</style>
